<script setup>
import { More } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import { getOrderList, getOrderDetail } from "@/api/order";
import { formatTime } from "@/utils/format";

const orderPreview = ref(null);
// 请求参数
const params = ref({
  current: 1,
  size: 10,
});

// 总条数
const total = ref(0);

// 加载
const loading = ref(false);

// 存储订单列表
const orderList = ref([]);
// 获取列表
const getList = async () => {
  loading.value = true;
  const res = await getOrderList(params.value);
  orderList.value = res.data.data.data;
  total.value = res.data.data.total;
  loading.value = false;
};
getList();

// 订单详情

const filterTag = (value, row) => {
  return row.status === value;
};
// 正确写法：
const handleSizeChange = (val) => {
  params.value.size = val;
  getList();
};
const handleCurrentChange = (val) => {
  params.value.current = val;
  getList();
};
</script>

<template>
  <Card title="订单管理">
    <el-table
      :data="orderList"
      style="width: 100%"
      v-loading="loading"
      :default-sort="[
        { prop: 'createTime', order: 'descending' },
        { prop: 'totalPrice', order: 'descending' },
      ]"
    >
      <el-table-column type="index" label="序列" width="80" />
      <el-table-column prop="orderId" label="订单编号" />
      <el-table-column prop="productId" label="产品ID" />
      <el-table-column prop="productName" label="产品名称" width="150" />
      <el-table-column prop="totalPrice" label="金额" width="100" sortable />
      <el-table-column
        prop="status"
        label="订单状态"
        :filters="[
          { text: '待付款', value: 0 },
          { text: '待发货', value: 1 },
          { text: '已收货', value: 2 },
          { text: '确认收货', value: 3 },
          { text: '取消订单', value: 4 },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
        width="100"
      >
        <template #default="{ row }">
          <el-tag v-if="row.status === 0" type="info">待付款</el-tag>
          <el-tag v-if="row.status === 1" type="warning">待发货</el-tag>
          <el-tag v-if="row.status === 2" type="primary">已收货</el-tag>
          <el-tag v-if="row.status === 3" type="success">确认收货</el-tag>
          <el-tag v-if="row.status === 4" type="danger">取消订单</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable width="130">
        <template #default="{ row }">
          {{ formatTime(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="60">
        <template #default="{ row }">
          <el-button
            :icon="More"
            circle
            plain
            type="primary"
            @click="orderPreview.handleOpen(row)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <el-pagination
      v-model:current-page="params.current"
      v-model:page-size="params.size"
      :page-sizes="[2, 3, 4, 5, 10]"
      background
      layout="jumper,total, sizes, prev, pager, next"
      :total="Number(total)"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 50px; justify-content: flex-end"
    />
  </Card>
  <OrderPreview ref="orderPreview" />
</template>

<style lang="scss" scoped></style>
